

<template>
  <div>
    <button @click="msg++">点击加</button>
    <span>{{ msg }}</span>
    <button @click="msg--">点击减</button>
  </div>
</template>



<script>
// Vue.extend的组件的简写方式：对象写法，它即为曾经学习的配置项

export default {
  //组件的响应式data函数：务必是函数写法，务必要返回一个对象

  data() {
    return { msg: 1 };
  },

   //这里不能书写template模板编辑器,因为vue运行版本依赖包是没有模板编辑器的
  //组件的模板在template标签里面书写，即为咱们当年template模板编辑器。
};
</script>


<style>
div {
  width: 500px;
  height: 300px;
  margin: 50px auto;
}
button {
  width: 50px;
  height: 50px;
  background: pink;
}
span {
  font-size: 50px;
  padding: 5px;
}
</style>